import WeCropper from '../../../distimg/we-cropper.js'

const device = wx.getSystemInfoSync() // 获取设备信息
const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
const height = device.windowHeight - 100
Page({
  /**
   * 页面的初始数据
   */
  data: {
    cropperOpt: {
      id: 'cropper',
      width: 375, // 画布宽度
      height: 510, // 画布高度
      scale: 2.5, // 最大缩放倍数
      zoom: 8, // 缩放系数
      cut: {
        x: (width - 350) / 2,
        y: (width - 200) / 2,
        width: 350, // 裁剪框宽度
        height: 350 // 裁剪框高度
      }
    },
    isChange: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var windowsInfo = wx.getSystemInfoSync();
    const {
      cropperOpt
    } = this.data;
    cropperOpt.width = windowsInfo.windowWidth;
    cropperOpt.height = windowsInfo.windowHeight-70;
    if (options.height) {
      cropperOpt.cut.height = Number(options.height)
    }
    this.setData({
      cropperOpt: cropperOpt
    })
    if (options.isChange) {
      var pages = getCurrentPages();
      var prevPage = pages[pages.length - 2]; //上一个页面
      prevPage.setData({
        isChange: options.isChange
      })
    }
    // 若同一个页面只有一个裁剪容器，在其它Page方法中可通过this.wecropper访问实例
    new WeCropper(cropperOpt)
      .on('ready', (ctx) => {
        console.log(`wecropper is ready for work!`)
      })
      .on('beforeImageLoad', (ctx) => {
        console.log(`current canvas context: ${ctx}`)
        wx.showToast({
          title: '上传中',
          icon: 'loading',
          duration: 20000
        })
      })
      .on('imageLoad', (ctx) => {
        wx.hideToast()
      })
    this.wecropper.pushOrign(options.src)
  },

  touchStart(e) {
    this.wecropper.touchStart(e)
  },
  touchMove(e) {
    this.wecropper.touchMove(e)
  },
  touchEnd(e) {
    this.wecropper.touchEnd(e)
  },

  getCropperImage() {
    this.wecropper.getCropperImage((src) => {
      if (src) {
        var pages = getCurrentPages();
        var prevPage = pages[pages.length - 2]; //上一个页面
        prevPage.setData({
          imgsrc: src
        })
        wx.navigateBack({
          delta: 1,
        })
      }
    })
  }
})